<template>
	<div>
		<el-form :model="registerForm" :rules="registerFormRules" ref="registerFormRef" label-width="100px"
			class="registerForm sign-up-form">
			<el-form-item label="用户名" prop="name">
				<el-input placeholder="Enter Username..." v-model="registerForm.name"></el-input>
			</el-form-item>
			<el-form-item label="邮箱" prop="email">
				<el-input placeholder="Enter Email..." v-model="registerForm.email"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="passwd">
				<el-input type="password" placeholder="Enter Password..." v-model="registerForm.passwd"></el-input>
			</el-form-item>
			<el-form-item label="重复密码" prop="passwd2">
				<el-input type="password" placeholder="Enter Password Again..." v-model="registerForm.passwd2">
				</el-input>
			</el-form-item>
			<el-form-item label="选择身份">
				<el-select v-model="registerForm.role" placeholder="请选择身份">
					<el-option label="用户" value="user"></el-option>
					<el-option label="管理员" value="admin"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button @click="handleRegister('registerFormRef')" type="primary" class="submit_btn">注册</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script type="ts">
	import { ref, getCurrentInstance } from "vue"
	export default {
		props: {
			registerForm: {
				type: Object,
				required: true
			},
			registerFormRules: {
				type: Object,
				required: true
			}
		},
		setup () {
			const { ctx } = getCurrentInstance()
			const handleRegister = (formName) => {
				ctx.$refs[formName].validate((valid) => {
					if (valid) {
						alert('submit!')
					} else {
						console.log('error submit!!')
						return false
					}
				})
			}
			return { handleRegister }
		}
	}
</script>

<style scoped>
	.submit-btn {
	  width: 100%;
	}
</style>
